<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="todoList.css" />
</head>

<body>
    <div id="app">
        <div class="header">
            <div class="container">
                <div class="logo">toDoList</div>
                <div class="input-area">
                    <input type="text" v-model="title" @keyup.enter="add"> <button @click="add">添加</button>
                </div>
            </div>
        </div>
        <div class="container">
            <h2><span>正在进行</span> <span class="mask-num">{{untodoList.length}}</span></h2>
            <ul class="mask-list">
                <li v-for="untodo in untodoList" :key="untodo.title">
                    <div><input type="checkbox" v-model="untodo.done" /> <span>{{untodo.title}}</span></div>
                    <button @click="del(untodo.title)">删除</button>
                </li>
            </ul>
        </div>
        <div class="container">
            <h2><span>已经完成</span> <span class="mask-num">{{todoList.length}}</span></h2>
            <ul class="mask-list complete-list">
                <li v-for="todo in todoList" :key="todo.title">
                    <div><input type="checkbox" v-model="todo.done"/> <span>{{todo.title}}</span></div>
                    <button @click="del(todo.title)">删除</button>
                </li>
            </ul>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>

    <script>
        // var information = [{title:"吃饭",done: true},{title:"睡觉",done: false}]
        var vm = new Vue({
            el: "#app",
            data: {
                title: "",
                information: []

            },
            methods: {
                add() {
                    if(this.title === ""){
                        return;
                    }
                    this.information.unshift({title: this.title,done: false})
                },
                del(title) {
                    const index = this.information.findIndex(todo => todo.title === title);
                    if(index === -1){
                        return
                    }
                    this.information.splice(index,1)
                }
            },
            computed: {
                // 未完成
                untodoList(){
                    return this.information.filter((todo) => {return todo.done === false})
                },
                // 完成
                todoList(){
                    return this.information.filter(todo => {return todo.done === true})
                }
            }
            
        })
    </script>
</body>

</html>